<template>
    <div class="album-desc">
        <!-- 左边部分 -->
        <div class="desc-left">
            <img v-lazy="albuminfo.blurPicUrl" alt=""/>
        </div>
        <!-- 右边部分 -->
        <div class="desc-right">
            <!--  -->
            <div class="desc-hd">
                <el-tag type="success" effect="plain">专辑</el-tag>
                <h2>{{albuminfo.name}}</h2>
            </div>
            <div class="desc-caozuo">
                <el-button type="primary" icon="el-icon-video-play">播放全部</el-button>
                <el-button icon="el-icon-star-off">收藏</el-button>
                <el-button icon="el-icon-share">分享({{dynamic.shareCount}})</el-button>
            </div>
            <div class="desc-introduce">
                <ul>
                    <li>
                        <span>歌手：{{albuminfo.artist.name}}</span>
                    </li>
                    <li>
                        <span>歌曲数：1</span>
                    </li>
                    <li>
                        <span>出品公司：{{albuminfo.company}}</span>
                    </li>
                    <li>
                        <span>发行时间：{{albuminfo.publishTime | showDate}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { formatDate } from '@/common/formatDate'
export default {
    name:'AlbumTopInfo',
    props:{
        dynamic:{
            type:Object,
            default(){
                return {}
            }
        },
        albuminfo:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    created(){
        
    },
    filters:{
        showDate(value){
            let date = new Date(value);
            return formatDate(date,'yyyy-MM-dd')
        }
    },
    data() {
        return {
            
        }
    },
    methods:{
        
    },
}
</script>
<style lang="less" scoped>
    .album-desc{
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-left: 5px;
        .desc-left{
            width: 240px;
            height: 240px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .desc-right{
            margin-left: 10px;
            height: 240px;
            .desc-hd{
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                h2{
                    margin-left: 10px;
                }
            }
            .desc-caozuo{

            }
            .desc-introduce{
                margin-top: 20px;
                li{
                    font-size: 16px;
                    margin-top: 10px;
                }
            }
        }
    }
</style>